<!-- 表头设置组件 -->
<template>
  <a-drawer :width="'50%'" :visible="dialogVisible" @ok="handleOk" @cancel="handleCancel" unmountOnClose>
    <template #title>
      <h4>{{ props.title }}</h4>
    </template>
    <div class="draggable">
      <div class="draggable-selected">
        <h3>已选择的表头：</h3>
        <draggable class="item" :list="selectedHeader.list" ghost-class="ghost" handle=".move" filter=".forbid" :force-fallback="true" chosen-class="chosenClass" animation="300" :fallback-class="true" :fallback-on-body="true" :touch-start-threshold="10" :fallback-tolerance="10" :sort="true">
          <template #item="{ element }">
            <div class="item-box">
              <a-button-group>
                <a-button :class="forbidList.includes(element.code) ? 'forbid' : 'move'">
                  {{ element.name }}
                </a-button>
                <a-button @click="removeHeader(element)" v-if="forbidList.includes(element.code) ? false : true">
                  <icon-close-circle />
                </a-button>
              </a-button-group>
            </div>
          </template>
        </draggable>
      </div>
      <div class="draggable-unselected">
        <h3>未选择的表头：</h3>
        <div class="item">
          <div class="item-box" v-for="item in unselectedHeaders.list" :key="item.code">
            <a-button @click="addHeader(item)"> {{ item.name }} </a-button>
          </div>
        </div>
      </div>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, watch, watchEffect } from 'vue';
import { formHeaderSetting } from '@/types/global';
import Draggable from 'vuedraggable';
import { cloneDeep } from 'lodash';

const props = withDefaults(
  // 参数说明
  defineProps<{
    visible: boolean; // 判断是否打开表头设置抽屉
    title: string; // 标题
    resultList: formHeaderSetting['list']; // 传过来的表头
    forbidList: string[]; // 不准移动和删除的表头
    // listData: () => any; // 请求表头的数据
  }>(),
  {
    visible: false,
    title: '表头设置',
    resultList: () => [] as formHeaderSetting['list'],
    forbidList: () => [],
  }
);

const emits = defineEmits(['update:visible', 'headerSave']);

// 单个表头接口
type Iheader = {
  id?: number; // id
  isDefault?: number; // 是否选择表头 0为未选择， 1为选择
  code?: string; // 表头编号
  name?: string; // 表头名称
};

// 判断抽屉是否显示
const dialogVisible = computed({
  get() {
    return props.visible;
  },
  set(visible: boolean) {
    emits('update:visible', visible);
  },
});

// 所有表头
const headerList = reactive<formHeaderSetting>({
  list: [],
});

// const unselectedHeaders = computed(() =>
//   headerList.list.filter((item: any) => !item.visible)
// );

// 未选择的表头
const unselectedHeaders = reactive<formHeaderSetting>({
  list: [],
});

// const selectedHeader = computed({
//   get() {
//     return headerList.list.filter((item: any) => item.visible);
//   },
//   set(val) {
//     headerList.list = [val, ...unselectedHeaders.value];
//   },
// });

// 选择的表头
const selectedHeader = reactive<formHeaderSetting>({
  list: [],
});

watch(
  dialogVisible,
  (newVal, oldVal) => {
    if (newVal) headerList.list = cloneDeep(props.resultList as any);
    else headerList.list = [];
  },
  { immediate: true }
);

watchEffect(() => {
  unselectedHeaders.list = headerList.list.filter(
    (item: any) => item.isDefault === 2
  );
  selectedHeader.list = headerList.list.filter(
    (item: any) => item.isDefault === 1
  );
});

// 去除一个表头
const removeHeader = (header: Iheader) => {
  headerList.list.forEach((item: any) => {
    if (item.code === header.code) item.isDefault = 2;
  });
};

// 添加一个表头
const addHeader = (header: Iheader) => {
  headerList.list.forEach((item: any) => {
    if (item.code === header.code) item.isDefault = 1;
  });
};

// 确认
const handleOk = () => {
  headerList.list = [...selectedHeader.list, ...unselectedHeaders.list];

  emits('headerSave', headerList.list);
  dialogVisible.value = false;
};

// 取消
const handleCancel = () => {
  dialogVisible.value = false;
};
</script>

<style scoped lang="less">
.draggable {
  &-selected {
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
  }
  &-selected,
  &-unselected {
    .item {
      display: flex;
      flex-wrap: wrap;

      &-box {
        margin: 0 10px 10px 0;
      }
    }
  }
}
</style>
